<nav class="navbar navbar-expand-lg bg-dark-grey fixed-top">
    <div class="container">

        <a routerLink="/home" class="navbar-brand" href="javascript:;">
            <img src="/assets/img/Sustainalytics-Logo-2018-white.svg" class="logo" />
        </a>

        <div class="navbar-brand search-container ml-1 pl-3 text-light-grey pointer" (click)="searchModal.show()">
            <img src="/assets/icons-svg/icon-search.svg" class="search-icon" />
            <span class="ml-2">Search</span>
        </div>

        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#globalNavigation" aria-controls="globalNavigation" aria-expanded="false" aria-label="Toggle navigation">
            <i class="ti-menu"></i>
        </button>

        <div class="navbar-collapse collapse" id="globalNavigation">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="javascript:;" id="navCompanyResearch" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Company Research</a>
                    <div class="dropdown-menu" aria-labelledby="navCompanyResearch">
                        <a [routerLink]="['/research', 'risk']" class="d-flex dropdown-item">
                            <div class="mr-auto">ESG Risk Rating <span class="badge badge-medium-grey text-body ml-2">NEW</span></div>
                            <div class="ml-auto"><i *ngIf="!productPermissions?.riskrating" class="ti-lock mr-2"></i></div>
                        </a>
                        <a [routerLink]="['/research', 'esg']" class="d-flex dropdown-item">
                            <div class="mr-auto">ESG Rating</div>
                            <div class="ml-auto"><i *ngIf="!productPermissions?.esg" class="ti-lock mr-2"></i></div>
                        </a>
                        <a [routerLink]="['/research', 'controversies']" class="d-flex dropdown-item">
                            <div class="mr-auto">Controversies</div>
                            <div class="ml-auto"><i *ngIf="!productPermissions?.controversies" class="ti-lock mr-2"></i></div>
                        </a>
                        <a [routerLink]="['/research','corporategovernance']" class="d-flex dropdown-item">
                            <div class="mr-auto">Corporate Governance</div>
                            <div class="ml-auto"><i *ngIf="!productPermissions?.governance" class="ti-lock mr-2"></i></div>
                        </a>
                        <a [routerLink]="['/research', 'sustainableproducts']" class="d-flex dropdown-item">
                            <div class="mr-auto">Sustainable Products</div>
                            <div class="ml-auto"><i *ngIf="!productPermissions?.sustainableproducts" class="ti-lock mr-2"></i></div>
                        </a>
                        <a [routerLink]="['/research', 'productinvolvement']" class="d-flex dropdown-item">
                            <div class="mr-auto">Product Involvement</div>
                            <div class="ml-auto"><i *ngIf="!productPermissions?.productinvolvement" class="ti-lock mr-2"></i></div>
                        </a>
                        <a [routerLink]="['/research', 'globalcompact']" class="d-flex dropdown-item">
                            <div class="mr-auto">Global Compact</div>
                            <div class="ml-auto"><i *ngIf="!productPermissions?.globalcompact" class="ti-lock mr-2"></i></div>
                        </a>
                    </div>
                </li>
                <li routerLink="/portfolios" routerLinkActive="active" class="nav-item">
                    <a class="nav-link" routerLink="/portfolios">Portfolios</a>
                </li>
                <li routerLink="/tools/0" routerLinkActive="active" class="nav-item">
                    <a class="nav-link" routerLink="/tools/0">Screening</a>
                </li>
                <li routerLink="/tools/1" routerLinkActive="active" class="nav-item">
                    <a class="nav-link" routerLink="/tools/1">Reporting</a>
                </li>
                <li routerLink="/knowledge-center/news" routerLinkActive="active" class="nav-item">
                    <a class="nav-link" routerLink="/knowledge-center/news">Knowledge Center</a>
                </li>
                <li class="nav-item dropdown ml-4">
                    <a class="nav-link dropdown-toggle" href="javascript:;" id="navHelp" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Help</a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navHelp">
                        <a class="dropdown-item" href="mailto:{{ managerEmail }}">Contact Client Advisor</a>
                        <a class="dropdown-item" href="https://s3-eu-west-1.amazonaws.com/globalaccess-tutorials/FAQ.pdf" target="_blank">F.A.Q.</a>
                        <a class="dropdown-item" href="https://www.sustainalytics.com/privacy-and-cookie-policy/" target="_blank">Privacy Policies</a>
                        <a class="dropdown-item" href="https://www.sustainalytics.com/legal-disclaimers" target="_blank">Legal Disclaimer</a>
                        <a class="dropdown-item" href="https://www.sustainalytics.com/research-universe/" target="_blank">Research Universe</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="javascript:;" id="navUser" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ userInitials }}</a>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navUser">
                        <a class="dropdown-item" href="javascript:;">
                            <div class="bold">{{ user.firstName }} {{ user.lastName }}</div>
                            {{ user.email }}
                        </a>
                        <a routerLink="/account" class="dropdown-item" href="javascript:;">Your Account</a>
                        <a routerLink="/login" class="dropdown-item" href="javascript:;">Sign Out</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

<app-modal #searchModal [id]="'searchModal'" [size]="'modal-lg'" (displayed)="companySearch.clearAndFocusInput()">
    <div class="app-modal-header">
        Company Search
    </div>
    <div class="app-modal-body">
        <app-company-search #companySearch [searchType]="searchType" [navigationId]="'navigationSearchInput'"></app-company-search>
    </div>
</app-modal>